<template>
  <view class="deviceManagement" id="deviceManagement">
    <view class="viewTop">
    <AtTabBar
      :tabList="tabList1"
      @click="handleClickTabBar"
      :current="current1"
    />
  </view>
    <view class="deviceList">
      <view class="listItem" v-for="device in deviceList" :key="device.e_equipment_code">
        <AtCard
            :note='"设备编码 \n" + device.e_equipment_code'
            :extra='device.e_status ? "在线状态" : "离线状态"'
            :extraStyle='device.e_status ? {"color": "green"} : {"color": "greey"}'
            :title="device.e_equipment_name"
            @tap="handleClickCard(device.e_equipment_code)"
            :icon="device.e_status ? {value: 'money', color: 'green'}:  {value: 'money', color: 'greey'}"
          >
            <view> 设备地址： {{ device.e_province }} · {{ device.e_city }} · {{ device.e_area }} </view>
            <view> 业务员： {{ device.e_salesperson_name }} </view>
         </AtCard>
      </view>
    </view>
    <AtFloatLayout
      v-if="isOpened"
      :isOpened="isOpened"
      title="设备下的拐杖" 
      @close="handleClose"
    >
      <view class="listItem" v-for="i in 10" :key="i">
          <AtCard
              note='小Tips'
              extra='额外信息'
              title='这是个标题'
              @tap="handleClickCard"
              :icon="{value: 'money'}"
            >
              这也是内容区 可以随意定义功能
          </AtCard>
        </view>
    </AtFloatLayout>
    <AtMessage />
  </view>
</template>

<script setup>
import { ref, reactive, OnBeforeMount } from 'vue'
import Taro from '@tarojs/taro'
import './deviceManagement.less'
import {equipmentList, equipmentsCaneLlist} from '../../http/api'
const deviceList = ref([])
const pageNumber = ref(1)
const currentStatus = ref(null)
const totalPage = ref(0)

const isOpened = ref(false)
const current1 = ref(0)

const CaneLlist = ref([]) // 获取设备下的拐杖信息

const ToastOpen = ref(false)
const ToastText= ref('')
const ToastIcon = ref('success')
const tabList1 = ref([
    { title: '全部'},
    { title: '在线设备'},
    { title: '离线设备' },
])
function handleClickTabBar (value) {
  current1.value = value
  currentStatus.value = value == 0 ? null : value == 1 ? 1 : 0
  getList()
}

function getList () {
  let queryData = currentStatus.value == null ? {page: pageNumber.value, page_size: 200} : {page: pageNumber.value, page_size: 10, e_status: currentStatus.value}
  equipmentList(queryData).then(res => {
    deviceList.value = res.data.data_list
    totalPage.value = res.total
  })
}
getList()

function getCaneLlist (e_real_code) {
  equipmentsCaneLlist({e_real_code}).then(res => {
    if (res.data.length == 0) {
      Taro.atMessage({
          message: '该设备下无拐杖信息',
          type: 'warning'
        })
    } else {
      CaneLlist.value = res.data
      isOpened.value = true
    }
  })
}
Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#C0EDED'
})
// 点击返回
function handleClick () {

}
// 点击卡片
function handleClickCard(code) {
  getCaneLlist(code)
 
}
function handleClose () {
  isOpened.value = false
  console.log('关闭')
}
</script>
